<template>
  <div class="header">
  
    <div class="header_back" v-show="showHeader">
      <span></span>
      <span class="iconfont" @click="toHome()">&#xe624;</span>
    </div>
    <div class="header_top" v-show="!showHeader" :style="{opacity:styleopacity}">
      <span class="iconfont" @click="toHome()">&#xe624;</span>
      <h1>杭州野生动物世界</h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    	showHeader:true,
    	styleopacity:0
    }
  },
  methods:{
  	toHome(){
  		this.$router.push("/");
  	}
  },
  mounted() {
  	let That = this;
  	window.addEventListener("scroll",()=>{
  		let top = document.documentElement.scrollTop;
  		if(top>45){
  			let opacity = top/130;
  			opacity=opacity>1?1:opacity;
  			That.styleopacity=opacity;
  			That.showHeader=false;
  		}else{
  			That.showHeader=true;
  		}
  	})
  },
  activated(){
  	document.documentElement.scrollTop = 0;
  }
}

</script>
<style scoped="" lang="scss">
.header_back {
  left: .1rem;
  top: .1rem;
  width: .72rem;
  height: .72rem;
  line-height: .72rem;
  position: absolute;
  font-size: .36rem;
  color: #fff;
  text-align: center;
  z-index: 10;

  span:first-child {
    display: block;
    width: .72rem;
    height: .72rem;
    background-color: #000;
    opacity: .5;
    -webkit-border-radius: .36rem;
    -moz-border-radius: .36rem;
    border-radius: .36rem;
  }

  span:last-child {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: .72rem;
    line-height: .72rem;
    text-align: left;
    text-indent: .20rem;
  }
}

.header_top {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  display: block;
  opacity: 1;
  height: .88rem;
  background: #00bcd4;
  z-index: 91;

  span {
    left: 0;
    top: 0;
    width: .8rem;
    height: .88rem;
    line-height: .88rem;
    position: absolute;
    font-size: .36rem;
    color: #fff;
    text-align: center;

  }

  h1 {
    overflow: hidden;
    margin: 0 1rem;
    line-height: .88rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .32rem;
    text-align: center;
    color: #fff;
  }
}

</style>
